@mixin fontFace ($family) {
    @at-root {
        @font-face{
            font-family: $family;
            src: url('../../fonts/#{$family}.ttf') format('truetype')
        }
    }

    font-family: $family !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.091px; // 0.2px
}

@mixin iconAfter($iconfont) {
    &::after {
        content: $iconfont;
        @content
    }
}

@mixin iconBefore ($iconfont) {
    &::before {
        content: $iconfont;
        @content
    }
}

@mixin fontColor ($color) {
    color: $color!important;
    &:hover {
        color: $color!important;
    }
}

@mixin user-select ($select) {
    -webkit-touch-callout: $select;
    -moz-user-select: $select;
    -webkit-user-select: $select;
    -ms-user-select: $select;
    user-select: $select;
}

@mixin text-dot($row) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $row;//超出行数
    -webkit-box-orient: vertical;
}

/**
TODO 可能有bug 现在right/left未实际使用过
* $direction: 包括 top, bottom, left, right
  使用时，为指定元素添加以下class的其中一个即可:
  border-top, border-bottom, border-left, border-right
*/
@mixin border($direction, $color: #dcdcdc) {

    .border-#{$direction} {
        position: relative;
        overflow: hidden; //防止溢出边界
    }

    //默认top
    $pseudo: before;
    $width: 100%;
    $height: 1px;
    $top: 0;
    $bottom: initial;
    //$transform: 'scaleY(.5)';

    @if($direction == bottom) {
        $pseudo: after;
        $top: initial;
        $bottom: 0;
    }
    @else if($direction == left) {
        $width: 1px;
        $height: 100%;
    }
    @else if($direction == right) {
        $pseudo: after;
        $width: 1px;
        $height: 100%;
    }

    .border-#{$direction}::#{$pseudo} {
        content: '';
        position: absolute;
        top: $top;
        bottom: $bottom;
        left: 0;
        right: 0;
        display: block;
        width: $width;
        height: $height;
        border-#{$direction}: 1px solid $color;
        z-index: 10;

        @media screen and (-webkit-min-device-pixel-ratio: 1.5){
            @if($direction == top) {
                -webkit-transform: scaleY(.5);
            }
            @else if($direction == bottom) {
                -webkit-transform: scaleY(.5);
            }
            @else {
                -webkit-transform: scaleX(.5);
            }
        }
    }
}